<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta name="referrer" content="no-referrer"/>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客管理</title>
  <link href="../static/images/favicon.ico" th:href="@{/images/favicon.ico}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"  />
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../static/css/element-ui-index.css" th:href="@{/css/element-ui-index.css}">
  <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css"  th:href="@{/lib/editormd/css/editormd.min.css}">


</head>
<body class="admin-body">

<div id="app">
  <!--顶部栏-->
  <div class="container-fluid p-1 bg-dark text-white text-center">
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="/admin">添加博客</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/admin/manageBlog">管理博客</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/admin/sys-configs">配置信息管理</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/admin/tags">标签管理</a>
      </li>
    </ul>
  </div>




  <!--    编辑/添加 博文-->
  <div v-show="dialogVisible" class="container-fluid mt-5" >
    <div class="card ">
      <div class="card-body">
        <el-form label-width="80px" >
          <div class="row mb-3">
            <div class="col-2">
              <!--版权-->
              <el-select class="w-100" v-model="editForm.copyright" placeholder="版权" >
                <el-option label="原创" :value="1"></el-option>
                <el-option label="转载" :value="0"></el-option>
              </el-select>
            </div>
            <div class="col-10 ">
              <!--标题-->
              <el-input v-model="editForm.title"  placeholder="标题">
              </el-input>
            </div>
          </div>

          <!--markdown编辑器-->
          <div id="md-content">
              <textarea  id="md-content-textarea" name="content" placeholder="博客内容" style="display: none;">
              </textarea>
          </div>

          <div class="row">
            <div class="col-6">
              <!--标签-->
              <el-form-item label="标签">
                <el-select class="w-100"  v-model="editForm.tagIds" multiple placeholder="标签" >
                  <el-option
                          v-for="item in tagList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>

            </div>
            <div class="col-6">
              <!--图片-->
              <el-form-item label="博客首图">
                <el-input v-model="editForm.firstPicture" placeholder="博客首图">
                </el-input>
              </el-form-item>

            </div>
          </div>

          <!--文章描述-->
          <el-form-item label="文章描述">
            <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入内容"
                    v-model="editForm.description">
            </el-input>
          </el-form-item>

          <el-form-item label="">
            <div class="text-start ">
              <el-checkbox v-model="editForm.recommend">推荐</el-checkbox>
              <el-checkbox v-model="editForm.shareStatement">转载声明</el-checkbox>
              <el-checkbox v-model="editForm.commentabled">评论</el-checkbox>
              <el-checkbox v-model="editForm.appreciation">是否开启赞赏</el-checkbox>
            </div>
          </el-form-item>

          <div class="text-end">
            <el-button type="info" @click="dialogVisible = false">返回</el-button>
            <el-button @click="clickSave(false)" >存为草稿</el-button>
            <el-button type="primary" @click="clickSave(true)">发布</el-button>
          </div>

          <div class="mb-5"></div>
        </el-form>
      </div>
    </div>

  </div>


</div>
</body>

<script src="../../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<!-- import Vue before Element -->
<script src="../../static/lib/vue.js"                   th:src="@{/lib/vue.js}"></script>
<!-- import JavaScript -->
<script src="../../static/lib/element-ui-index.js"      th:src="@{/lib/element-ui-index.js}"></script>
<script src="../../static/lib/axios.min.js"             th:src="@{/lib/axios.min.js}"></script>
<script src="../../static/lib/axiosInstance.js"         th:src="@{/lib/axiosInstance.js}"></script>
<script src="../../static/lib/editormd/editormd.min.js" th:src="@{/lib/editormd/editormd.min.js}"></script>

<script >

  new Vue({
    el: '#app',
    data: function() {
      return {

        // 表单显示
        dialogVisible: true,
        formLabelWidth: '120px',
        editForm:{
          recommend: false,
          shareStatement: false,
          commentabled: false,
          appreciation: false
        },
        tagList:[],
        contentEditor:null
      }

    },
    methods:{
      mapRecommend(recommend){
        const recommendMap = {
          true: '是',
          false: '否'
        }
        return recommendMap[recommend] || '未知';
      },
      mapPublished(published){
        const publishedMap = {
          true: '是',
          false: '否'
        }
        return publishedMap[published] || '未知';
      },
      mapCopyright(copyright){
        const copyrightMap = {
          1: '原创',
          0: '转载'
        }
        return copyrightMap[copyright] || '未知';
      } ,
      fetchTagList(){
        axiosInstance.get(`/admin/tags/all`).then(res => {
          if (res.code === 20000){
            this.tagList = res.data.tagList;
          }
        })
      },

      // 保存
      clickSave(published){
        this.editForm.published = published;
        //拿到节点id为md-content-textarea的文本
        this.editForm.content = $("#md-content-textarea").val();
        if (this.editForm.id) {
          // 有ID更新
          axiosInstance.put(`/admin/blogs`, this.editForm)
                  .then(resp => {
                    if(resp.code === 20000){
                      this.$message.success('更新成功');
                    }

                  })
                  .catch(error => {
                    console.error(error);
                  });
        } else {
          // 无ID创建
          axiosInstance.post('/admin/blogs', this.editForm)
                  .then(resp => {
                    if(resp.code === 20000){
                      this.$message.success('创建成功');
                      this.editForm = {};
                      $("#md-content-textarea").val("");
                      this.showDialog();
                    }
                  })
                  .catch(error => {
                    console.error(error);
                  });
        }
      },
      showDialog(){
        this.dialogVisible = true
        //渲染markdown编辑器
        this.$nextTick(() => {
          this.initMd();
        });
      },
      initMd(){

        $(function() {
          this.contentEditor = editormd("md-content", {
            // 配置参数...
            width   : "100%",
            height  : 640,
            syncScrolling : "single",
            // path    : "../../static/lib/editormd/lib/", // 静态地址
            path    : "/lib/editormd/lib/",//（动态地址，服务启动后，必须用这个）
            markdown : "",
            // codeFold : true,
            // //syncScrolling : false,
            saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
            // searchReplace : true,
            // //watch : false,                // 关闭实时预览
            // htmlDecode : "style,script,iframe|on*",// 开启 HTML 标签解析，为了安全性，默认不开启 开启后会有奇怪的bug，建议不开启
            // toolbar  : false,             //关闭工具栏
            // //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            // emoji : true,
            // taskList : true,
            tocm            : true,         // Using [TOCM]
            tex : true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart : true,             // 开启流程图支持，默认关闭
            sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
            // //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            // //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            // //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            // //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            // //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            // imageUpload : true,
            // imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"]

          });
        });
      },
      logout(){
        axiosInstance.get('/admin/logout').then(res => {
          if (res.code === 20000){
            location.href = "/admin";
          }
        })
      }

    },
    mounted(){
      this.showDialog();
      this.fetchTagList();
    },
    created(){
      this.initMd()
    }
  })




</script>

</html>
